<template>
	<view style="background-color: #ECF0F3;">
		<!-- 商品列表展示 -->
		<!-- 发请求  拿数据  存本地  做展示 -->
		<!-- v-if 判断result存在 再进行渲染  网络请求 数据延迟 -->
		<uni-list style="#fff" v-if="data">
			<uni-list-item direction="column" v-for="(item,index) in data" :key="index" :to="`../good-details/good-details?lid=${item.lid}`">
				<!-- 自定义插槽 -->
				<!-- tel快捷 -->
				<template slot="body">
					<view class="cell">
						<!-- 图片 -->
						<image :src="item.pic" mode=""></image>
						<view>
							<!-- 商品名称 -->
							<view>{{item.title}}</view>
							<!-- 价格 -->
							<view>¥ {{item.price}}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- loadmore 加载更多-->
		<uni-load-more
			:status="status"
			style="background-color: #fff;"
		></uni-load-more>
		<!-- 回到顶部按钮 -->
		<view class="btn-gotop" v-show="showGoTop" @click="doGoTop">
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showGoTop: false,
			status: 'more',
			// url="",
			result: null,
			// 来装商品相关
			data:null
		};
	},
	onPageScroll(e) {
		// console.log(e);
		this.showGoTop = e.scrollTop > 250;
	},
	// 触底事件  触底时触发
	onReachBottom() {
		// this.status = 'loading';
		// const { pno, pageCount } = this.result;
		// if (pno == pageCount) {
		// 	// noMore是固定值
		// 	this.status = 'noMore';
		// 	// 并且不在发送请求  后续代码不执行
		// 	return;
		// }
		// this.getData(pno + 1);
	},
	mounted(){
		this.getData();
	},
	methods: {
		
		// 回到顶部
		doGoTop() {
			console.log('触发回到顶部');
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		//定义方法发请求
		getData(){
			// #ifdef MP-WEIXIN
			const url="http://127.0.0.1:3000/products"
			// #endif
			uni.request({
				url,
				method:"GET",
				success: (res) => {
					console.log(res);
					this.data=res.data;
				},
				fail:(err)=>{
					console.log(err)
				},
				complete: () => {
					
				}
			})
		}
	}
};
</script>

<style lang="scss">
body {
	background-color: #ecf0f3;
}
.cell {
	// 内填充
	padding: 5px;
	display: flex;
	> image {
		width: 180rpx;
		height: 180rpx;
		// 方法一
		// flex:none;
		// 方法二
		min-width: 180rpx;
		// 方法三
		// flex-shrink: 0;
	}
	> view {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// 商品名称
		> view:first-child {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		> view:last-child {
			color: red;
			font-size: 1.1em;
		}
	}
}
</style>
